<template>
  <div
    class="top-theme flex white"
    :style="{ background: `url(${$utils.getImg(imgUrl)}) no-repeat center`, height: height }"
  >
    <p class="des1 fz44">{{ des1 }}</p>
    <p class="des2 fz22">{{ des2 }}</p>
    <p class="des3 fz22">{{ des3 }}</p>
    <slot></slot>
  </div>
</template>

<script setup>
defineOptions({
  name: 'TopTheme'
})
defineProps({
  des1: {
    type: String,
    default: ''
  },
  des2: {
    type: String,
    default: ''
  },
  des3: {
    type: String,
    default: ''
  },
  imgUrl: {
    type: String,
    default: ''
  },
  height: {
    type: String,
    default: '200px'
  }
})
</script>

<style lang="scss" scoped>
.top-theme {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.des1 {
  margin-bottom: 25px;
}
.des2,
.des3 {
  line-height: 34px;
}
</style>
